import React, { useEffect, useState } from "react";
import styles from "./HZGroup.module.scss";
import axios from "../../../api/instance.js";
const HZGroup = () => {
  let [group, setGroup] = useState([]);
  // 请求发数据
  useEffect(() => {
    axios.get("home/groups?area=AREA%7C88cff55c-aaa4-e2e0").then((res) => {
      console.log(res);
      setGroup(res.body);
    });
  }, []);
  return (
    <div className={styles.HZGroup}>
      <div className={styles.HZGroupTitle}>
        <div className={styles.titleLeft}>租房小组</div>
        <div className={styles.titleRight}>更多</div>
      </div>
      <div className={styles.HZGroupList}>
        {group.map((g) => (
          <div key={g.id} className={styles.HZGroupListItem}>
            <div className={styles.listItemLeft}>
              <div className={styles.title}>{g.title}</div>
              <div className={styles.desc}>{g.desc}</div>
            </div>
            <div className={styles.listItemRight}>
              <img
                src={process.env.REACT_APP_BASEURL + g.imgSrc.replace("/", "")}
                alt=""
              />
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default HZGroup;
